<template>
  <div class="right-wrap">
    <h2>TOP 100</h2>
    <div class="right-wrap-piaoF">
      <img :src="topone.image" alt="" />
      <div class="right-wrap-title">
        <span class="one">{{topone.title}}</span>
        <span class="two">{{topone.pfeng}}分</span>
      </div>
    </div>
    <ul class="bangdan-wrap">
      <li v-for="(item,index) in topOther">
        <span>
          <i>{{item.id}}</i>
          {{item.title}}
        </span>
        <span class="bangdan-num">{{item.pfeng}}分</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      topone:'',
      topOther:[]
    };
  },
  mounted() {},
  methods: {
    topbd(){
      this.$http.get('/Mrighthree').then(res=>{
        this.topone = res.data.data[0]
        this.topOther = res.data.data.splice(1)
        // console.log(this.topone);
        // console.log(this.topOther);
      }).catch(err=>{
        console.log(err);
      })
    }
  },
  created(){
    this.topbd()
  }
};
</script>

<style lang="scss" scoped>
$colors: #ed4036;
.right-wrap {
  margin: 50px 0 0 0;
  width: 360px;
  min-height: 600px;
  /* background: rgb(206, 130, 130); */
  h2 {
    font-weight: 500;
    color: $colors;
  }
  .right-wrap-piaoF:hover {
    background: #f6f6f6;
  }
  .right-wrap-piaoF {
    cursor: pointer;
    box-sizing: border-box;
    margin: 20px 0 0 0;
    display: flex;
    border: 1px solid #e9e6e6;
    img {
      width: 120px;
      height: 78px;
      margin-right: 10px;
    }
    .right-wrap-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      .one {
        font-size: 18px;
      }
      .two {
        color: #ee4137;
      }
    }
  }
  .bangdan-wrap{
      list-style: none;
      li:hover{
          background: #f6f6f6;
      }
      li{
          width: 360px;
          height: 55px;
          line-height: 55px;
          padding:10px 0 ;
          display: flex;
          justify-content: space-between;
          i{
              margin-right:5px ;
              color: #ee4137;
          }
      }
      .bangdan-num{
          color: #ee4137;
      }
  }
}
</style>
